  <template>
  <!-- 文章列表 -->
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column
        fixed
        prop="title"
        label="文章标题"
        width="180"
      ></el-table-column>
      <el-table-column prop="writer" label="作者" width="180">
      </el-table-column>
      <el-table-column prop="like" label="点赞数" width="180">
      </el-table-column>
      <el-table-column
        prop="comment"
        label="评论数"
        width="180"
      ></el-table-column>

      <el-table-column
        prop="time"
        label="发表时间"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pagerIndex"
        :page-size="pager.pagerSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getArticle, removeArticle } from '../../api/article'
import formatTime from '../../utils/formatTime'

export default {
  data () {
    return {
      tableData: [],
      pager: {
        pagerIndex: 1,
        pagerSize: 10,
        rowsTotal: 1
      }

    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 编辑
    handleEdit (index, row) {
      console.log(index, row)
      this.$router.push({ name: 'editArticle', params: { id: row.id } })
    },
    // 删除
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await removeArticle(row.id)
          console.log(res)
          if (res.data.code === 200) {
            this.tableData.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$error({
              type: 'success',
              message: '删除失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      console.log(index, row)
    },

    // 获取后台数据
    async fetchData (
      pager = {
        pageIndex: this.pager.pagerIndex,
        pageSize: this.pager.pagerSize
      }
    ) {
      console.log(pager)
      const res = await getArticle(pager)
      if (res.data.code !== 200) return this.$message.error(res.data.msg)
      console.log(res)
      res.data.data.data.forEach((item) => {
        this.tableData.push({
          id: item.id,
          title: item.articleTitle,
          time: formatTime(item.createdTime),
          like: res.data.data.like.some((l) => l.articlesId === item.id)
            ? res.data.data.like.filter((l) => l.articlesId === item.id)[0].count
            : 0,
          comment: res.data.data.comment.some((l) => l.articlesId === item.id)
            ? res.data.data.comment.filter((l) => l.articlesId === item.id)[0].count
            : 0,
          writer: item.username
        })
      })

      this.pager.pagerIndex = res.data.data.pager.pageIndex
      this.pager.pagerSize = res.data.data.pager.pageSize
      this.pager.rowsTotal = res.data.data.pager.rowsTotal
      console.log(res)
    },
    // 分页页面大
    handlePageSizeChange (val) {
      this.pager.pageSize = val
      // console.log(val)
      this.fetchData()
    },
    // 分页页码
    handlePageIndexChange (val) {
      this.pager.pagerIndex = val
      // console.log(val)
      this.fetchData()
    }
  }
}
</script>
<style>
</style>
